<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>数字滚动计数器效果</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f5f5f5;
    }

    .counter-container {
      display: flex;
      background-color: #fff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .digit-container {
      width: 40px;
      height: 60px;
      overflow: hidden;
      position: relative;
      margin: 0 2px;
    }

    .digit-list {
      position: absolute;
      transition: transform 2s ease-in-out;
      transform: translateY(0);
    }

    .digit {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36px;
      height: 60px;
      font-weight: bold;
    }

    .prefix,
    .suffix {
      font-size: 24px;
      margin: 0 10px;
      align-self: center;
    }

    #counter {
      display: flex;
    }
  </style>
</head>

<body>
  <div class="counter-container">
    <div class="prefix">今日已解决</div>
    <div id="counter"></div>
    <div class="suffix">个问题</div>
  </div>

  <script>
    // 配置参数
    const CONFIG = {
      DURATION: 2000, // 动画持续时间（毫秒）
      ROLL_COUNT: 2, // 数字滚动的额外循环次数
      DELAY_BETWEEN_DIGITS: 40, // 数字之间的延迟时间（毫秒）
      DIGIT_HEIGHT: 60, // 数字高度（像素）
      TARGET_NUMBER: 7140909, // 目标数字
    };

    function createCounter(targetNumber) {
      const counterEl = document.getElementById("counter");
      const digits = targetNumber.toString().split("");

      // 为每个数字创建容器和滚动效果
      digits.forEach((digit, index) => {
        const digitContainer = document.createElement("div");
        digitContainer.className = "digit-container";

        const digitList = document.createElement("div");
        digitList.className = "digit-list";

        // 设置动画延迟，从左到右依次延迟
        const delay =
          (digits.length - index - 1) * CONFIG.DELAY_BETWEEN_DIGITS;
        digitList.style.transition = `transform ${CONFIG.DURATION - delay
          }ms ease-in-out`;

        // 创建滚动序列（0-9 重复多次）
        for (let i = 0; i <= CONFIG.ROLL_COUNT; i++) {
          for (let j = 0; j < 10; j++) {
            const digitEl = document.createElement("div");
            digitEl.className = "digit";
            digitEl.textContent = j;
            digitList.appendChild(digitEl);
          }
        }

        digitContainer.appendChild(digitList);
        counterEl.appendChild(digitContainer);
      });

      // 开始动画
      setTimeout(() => {
        animateToTarget(targetNumber);
      }, 100);
    }
    // 启动动画
    function animateToTarget(targetNumber) {
      const digits = targetNumber.toString().split("");
      const digitLists = document.querySelectorAll(".digit-list");

      digitLists.forEach((list, i) => {
        const targetDigit = parseInt(digits[i], 10);
        //关键计算公式！（总滚动距离 = 惯性圈数*10 + 目标数字）
        const extraRolls = CONFIG.ROLL_COUNT * 10;
        const targetY = -(extraRolls + targetDigit) * CONFIG.DIGIT_HEIGHT;

        list.style.transform = `translateY(${targetY}px)`;
      });
    }

    // 初始化计数器
    window.onload = function () {
      createCounter(CONFIG.TARGET_NUMBER);
    };
  </script>
</body>

</html>
